<template>
  <div class="info-list-root" ref="info">
    <!-- <div id="code"></div>  -->
    <div class="head">
      <el-checkbox @change="checkAll()" v-model="checkAllFlag"></el-checkbox>
      <input type="button" @click="deleteAll()" value="删除" class="btn">
      <input type="button" @click="exportfile()" value="导出" class="btn">
      <input type="button" @click="mark()"  value="标记为已阅" class="btn">
      <input type="button" @click="gotab()"  value="返回书签 " class="btn">
      <input type="button" v-if="topic" value="时间升序 " class="btn" v-on:click="setAsc">
      <input type="button" v-if="topic" value="时间降序 " class="btn" v-on:click="setDesc">
      <div class="right">
          <el-select class="current" v-model="number" placeholder="请选择" size='small'>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        <input type="button" value="刷新" class="btn" @click="getAgain()">
      </div>
    </div>
    <div class="_item " :class="{'abstract':abstract}"  ref="tab" v-for="(item,index) in list" :key="index">
      <div class="checkbox">
        <el-checkbox @change="checkOne()" v-model="item.checked"></el-checkbox>
        {{index+1}}
        <div class="tab" :class="{active:index==istab}" @click="istab=index">
        </div>
      </div>
      <div class="content">
        <div class="main">
          <div class="pic">
            <div class="img" v-bind:style="{backgroundImage:item.urlimg}"></div>
            <div class="label" >{{item.webSite|subhtml}}</div>
          </div>
          <div class="text itemText">
            <div class="head">
              <div class="left">
                <div @click="queryarticle(item),item.isread=true" class="title"
                v-html="filterHtml(item.title)"></div>
                <div v-if="item.doc_count>1" class="similar">
                相似文章 {{item.doc_count}}</div>
              </div>
              <div class="right">
                <div class="read" v-if="item.isread==true"><img src="./img/read.png" class="readimg"></div>
                <div class="tend" >倾向性: <TendLabel :tend="parseInt(item.positiveOrNegative)"></TendLabel></div>
              </div>
            </div>
            <div v-show="!abstract" @click="queryarticle(item)" class="body" v-html="filterHtml(item.content)" ></div>      
          </div>
        </div>
        <div class="imgbtns">
            <div class="imgbtn imgbtn-share" @click="share($event,index)">
              <i class="fa share"></i>分享
              <!-- 分享 -->
              <div class="sharethat" @click.stop>
                <div class="wx" @click.stop="sharewx(item,$event)">微信
                  <div class="ewmbox" @click.stop></div>
                </div>
                <div class="wb" @click.stop="sharewx(item,$event)">微博
                  <div class="ewmbox" @click.stop></div>
                </div>
                <div class="close" @click.stop="closeshare($event)">关闭</div>
              </div>
            </div>
            <div class="imgbtn report-y" v-if="item.publish == true && parseInt(role) != 1">
              <i class="fa report "></i>已上报
            </div>
            <div class="imgbtn" @click="disposeinsert(item)" v-if="item.publish == false && parseInt(role) != 1">
              <i class="fa report"></i>上报
            </div>
          <!-- 收藏 -->
          <div class="imgbtn"  @click="insert(item,item.enshrine)" :class="{collectActive:item.enshrine==true}">
            <i class="fa" :class="{'fa-star':item.enshrine==true,
            'fa-star-o':item.enshrine==false}"></i>
            {{item.enshrine==true?'取消收藏':'加入收藏'}}
          </div>
        <!-- end -->
          <div class="imgbtn " v-model="item.isread" :class="{active:item.isread==true}" 
          @click="markRead(item)"  >
            <i class="fa fa-eye"></i>
          {{item.isread | fomartvalue}}
          </div>
          <div class="imgbtn" @click="deleteOne(item,index)"><i class="fa fa-trash"></i>删除</div>
        </div>
      </div>
      <div class="timedate">
        <div class="date" >{{item.poTime|fomartDate(item.poTime)}}</div>
        <div class="time" >{{item.poTime|fomartTime(item.poTime)}}</div>
      </div>
    </div>  
  </div>
</template>

<script>
import {bus} from 'src/bus.js'
import moment from 'moment'
import TendLabel from 'components/common/TendLabel'
import stamp from 'components/common/stamp'
import QRCode from 'qrcodejs2'
import $ from 'jquery'
let readArr = []
export default {
  name: 'info-list-root',
  components: {TendLabel,stamp},
  props:['Information','data','number','keywords','topic','abstract'],
  data(){
    return {
      list:[],
      show:-1,
      value: 100,
      checkAllFlag:false,
      istab:-1,
      currCount:'',
      options: [{
          value: 30,
          label: '30条/页'
        }, {
          value: 50,
          label: '50条/页'
        }, {
          value: 80,
          label: '80条/页'
        }, {
          value: 100,
          label: '100条/页'
        }],
    }
  },
  mounted(){
    this.currCount = this.pageSize
  },
  computed:{
    carryOut:function(){
      return this.$store.state.Info.similar_data
    },
    role(){
      return this.$store.state.personal.role
    },
    pageSize(){
			return parseInt(this.$store.state.Info.limit)
		},
  },
  filters:{
    fomartDate:function(time){
      return moment(parseInt(time)).format('YYYY-MM-DD')
    },
    fomartTime:function(time){
      return moment(parseInt(time)).format('HH:mm:ss')
    },
    fomartvalue:function(value){
      if (value) {
        return '取消已阅'
      }else{
        return '标记为已阅'
      }
    },
    subhtml(value){
      return value.substring(0,8)+'..'
    },
  },
  watch:{
    pageSize(){
      this.currCount = this.pageSize
    },
    number(){
        this.$emit('Upnumber',Number(this.number))
    },
    data(){
      alert(1)
      // this.list = (data[0] && data[0]['data']) ? data.map(d => ({doc_count: d.doc_count, ...d.data[0]})) : data
      this.list = (this.data[0] && this.data[0]['data']) ? this.data.map(d => ({
                                checked:d.checked,
                                collectName:d.collectName,
                                doc_count:d.doc_count,
                                enshrine:d.enshrine,
                                isread:d.isread,
                                key:d.key,
                                urlimg:d.urlimg,
                                ...d.data[0]})) : this.data
    }
  },
  methods:{
    // 分享
    share(ev,i){
      $('.sharethat').hide()
      if(i == (this.list.length-1)){
        $(ev.target).find('.sharethat').css('top','-40px')
      }
      $(ev.target).find('.sharethat').show()
    },
    closeshare(ev){
      let dom = $(ev.target).parent()
      dom.find('.ewmbox').hide()
      dom.hide()

    },
    sharewx(item,ev){
      $('.ewmbox').css('opacity',0)
      let dom = $(ev.target).find('.ewmbox')
      dom.html('')
      var qrcode = new QRCode(dom[0], {
        text: item.url,
        width: 78,
        height: 78,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.L
      });
      dom.show().animate({opacity:1});
      
    },
    // 上报
    async disposeinsert(item){
      let res = await this.$http.post('vrv-monitor-platform-web/popularfeelingsDispose/insert',{
        popularfeelingsId:item.id,
        popularfeelingsTitle:item.title,
        popularfeelingsContent:item.content
      })
      if(res.body.success == true){
        item.publish = true
        this.$message.success('上报成功')
      }
    },
    // 专题升序
    setAsc(){
      this.$emit('setAsc')
    },
    //专题降序
    setDesc(){
      this.$emit('setDesc')
    },
    filterHtml(value){
      return value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
    },
    // 是否已阅
    markRead(item){
      item.isread = !item.isread
      let readArr = []
      let id;
      if(typeof(item.title)!='undefined'){
        id = item.id
      }else{
        id= item.data[0].id
      }
      if (localStorage.read) {
        let _readArr = localStorage.read
        readArr = JSON.parse(_readArr);
      };
      if(item.isread){
        if (readArr.indexOf(id)==-1) {
          readArr.push(id)
        }
        
      }else{
        let index = readArr.indexOf(id)
        readArr.splice(index,1)
      }

      let _readArr1 = JSON.stringify(readArr); 
      localStorage.read = _readArr1
    },
    // 标记为已阅
    mark(){
      this.list.forEach((item,index)=>{
        let id = item.id
        if (item.checked==true) {
            item.isread = true
            if (localStorage.read) {
              let _readArr = localStorage.read
              readArr = JSON.parse(_readArr);
              if (readArr.indexOf(id)==-1) {
                readArr.push(id)
              }   
            }else{
              if (readArr.indexOf(id)==-1) {
                readArr.push(id)
              }   
            }
            let _readArr1 = JSON.stringify(readArr); 
            localStorage.read = _readArr1
        };
      })
    
    },
    // 删除单个
    deleteOne(item,index){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = item.id
          this.$http.post('vrv-monitor-platform-web/data/delete',{
            deleteIds:id
          }).then(res=>{
            if(res.body.success==true){
                this.data.splice(index,1)
                this.$message.success('删除成功')
            }
          })
        }).catch(() => {
          this.$message.info('已取消')       
      });
    },
    // 删除所有
    deleteAll(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.commit('LoadingTrue');
          let arr = []
          for(let i=this.list.length-1;i >=0;i--){
                let item = this.list[i]
                let id = item.id
                if(item.checked == true){
                  arr.push(id)
                }
              }
              this.$http.post('vrv-monitor-platform-web/data/delete',{
                deleteIds:arr.join(',')
              }).then(res=>{
                for(let i=this.list.length-1;i >=0;i--){
                    let item = this.list[i]
                    if(item.checked == true){
                        this.list.splice(i,1);
                    }
                }
              })
          this.$store.commit('Loadingfalse');
          this.$message.success('删除成功')
        }).catch(() => {
          this.$message.info('已取消')  
        });
    },
    // 导出
    exportfile(){
      let ids = []
      this.list.forEach((item,index)=>{
        let id = item.id
        if(item.checked == true){
          ids.push(id)
        }
      })
      if(this.list.every(d=> !d.checked)){
					this.$message.error("请选择")
					return
			}
      window.open('vrv-monitor-platform-web/data/exportSelects?ids='+ids.join(','))
    },
    // 加入收藏
    insert(item,r){
      let flag = r==false||r=='fasle'?false:true
      this.$store.commit('LoadingTrue')
      if (flag) {
        let id = typeof(item.title)!='undefined'?item.id:item.data[0].id
        this.$http.post('vrv-monitor-platform-web/collection/delete',{
          favoriteIds:id
        }).then(res=>{
          if (res.body.success==true) {
            this.$message('已经取消收藏')
            item.enshrine =false
            this.$store.commit('Loadingfalse');
          }else{
            this.$message.error(res.body.message)
            this.$store.commit('Loadingfalse');
          }
        }).catch(err=>{
          this.$store.commit('Loadingfalse');
        })
      }else{
        let id = typeof(item.title)!='undefined'?item.id:item.data[0].id
        let title = typeof(item.title)!='undefined'?item.title:item.data[0].title
        let content = typeof(item.title)!='undefined'?item.content:item.data[0].content
        content = content.substr(0,300)
        let poTime = typeof(item.title)!='undefined'?item.poTime:item.data[0].poTime
        let webSite = typeof(item.title)!='undefined'?item.webSite:item.data[0].webSite
        let domain = typeof(item.title)!='undefined'?item.domain:item.data[0].domain
        let n = typeof(item.title)!='undefined'?item.positiveOrNegative:item.data[0].positiveOrNegative
        poTime = moment(parseInt(poTime)).format("YYYY-MM-DD HH:mm:ss")
        this.$http.post('vrv-monitor-platform-web/collection/insert',{
          favoriteId:id,
          title:title,
          content:content,
          poTime:poTime,
          webSite:webSite,
          domain:domain,
          positiveOrNegative:n
        }).then(res=>{
          if (res.body.success==true) {
            item.enshrine =true
            this.$store.commit('Loadingfalse');
            this.$message('已经加入到收藏')
          }else if(res.body.success==false){
            this.$store.commit('Loadingfalse');
            this.$message.error(res.body.message)
          }
        }).catch(err=>{
          this.$store.commit('Loadingfalse');
        }) 
      }
    },
    // 文章查询
    queryarticle(item){
      this.$store.commit('LoadingTrue');
      let count = 0
      if (item.doc_count&&item.doc_count==1) {
        this.$store.commit('setxxcount',{
          count:1
        });
      }
      let flag = typeof(item.title)!='undefined'
      let id = item.id
      let pirnt = flag?item.titleContentPrint:item.key
      this.$store.dispatch('queryarticle',{
        id:id,
        keywords:this.keywords,
        titleContentPrint:pirnt,
        count:count
      });
    },
    checkAll(){
      this.list.forEach((value,index)=>{
        value.checked = this.checkAllFlag
      })  
    },
    checkOne(){
      if(this.checkAllFlag){
        this.checkAllFlag = false
      }
    },
    gotab(){
      let n = this.$refs.tab[this.istab].offsetTop
      bus.$emit('gotab', Number(n))
    },
    // 刷新
    getAgain(){
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="stylus" scoped>
#code
  width 100px
  height 100px
  canvas
    width 100%
    height 100%
.current
  width 7rem
  margin-right 1rem
  height 2.1rem
.info-list-root .menus
  height 3.2rem
  display flex
  line-height 3.2rem
  background #eee
  border 1px solid #dcdcdc
  border-right 0
  boorder-bottom 0
  .menu
    position relative
    flex 0 0 7.8rem
    width 7.8rem
    text-align center
    font-size 14px
    color #333
    border-right 1px solid #dcdcdc
    .fa 
      position absolute
      top 5px
      right 5px
      color #e85a47
  .menu.active
    color #fff
    background #e85a47
.info-list-root>.head
  height 2.5rem
  line-height @height
  background-color #f6f6f6
  border 1px solid #dcdcdc
  padding 0.5rem 1rem 0.5rem 1rem
  >.el-checkbox
    margin-right 1rem
  >.right
    float right
    height 100%

.btn
  height 2.1rem
  background-color white
  border 1px solid #bfcbd9
  border-radius 5px
  padding 0 1.5rem
  margin-right 1rem
  outline none
  cursor pointer
  transition all .3s ease
  &:hover
    background-color rgb(230,230,230)

.imgbtn
  position relative
  color #666666
  font-size .88rem
  display inline-block
  cursor pointer
  width 10vw
  min-width 8rem
  text-align center
  border-right 1px solid #dcdcdc
  line-height 1.4rem
  >.fa
    margin-right .6rem
    &.share
      width 15px
      height 18px
      margin-top 2px
      vertical-align top
      background url('img/share.png') no-repeat
      background-size cover
  >.report
    width 15px
    height 16px
    background url('img/report.png') no-repeat
    margin-top 3px
    vertical-align top
  
  &.report-y
    color #8c97cb
    >.report
      background url('img/report-y.png') no-repeat
    

.imgbtn.active
  color #8c97cb

.imgbtn:last-child
  border-right 0
.select
  background-image url(../../assets/select-arrow.png)
  background-repeat no-repeat
  background-position 88% center
  padding 0 2rem 0 1rem
  appearance none
  -webkit-appearance none;
  -moz-appearance none;
.stamp
  >div
    display inline-block
    float right
    margin-left 2rem
    transform translateY(-8px)
.info-list-root>._item
  height 10.5rem
  border 1px solid #dcdcdc
  border-top 0
  background #fbfbfb
  display flex
  font-size .88rem
  &.abstract
    height 118px
    >.content
      >.main
        height 80px
        >.text
          transform translateY(18px)
          .readimg
            transform translateY(-18px)
        >.pic
          >.img
            width 40px
            height 40px
            margin-bottom 0.3rem
  >.checkbox
    width 4rem
    flex-shrink  0
    border-right @border
    padding 1.2rem 0 0 1rem
    box-sizing border-box
    position relative
    .tab
      position absolute
      right 0
      bottom 0.7rem
      width 17px
      height 26px
      background url(./img/notab.png)
      cursor pointer
      background-size cover
    .tab.active
      width 30px
      height 26px 
      background url(./img/tab.png)
      background-size cover
  >.content
    border-right @border
    flex auto
    >.main
      height 8rem
      border-bottom @border
      display flex
      overflow hidden
      >.pic
        width 8rem
        flex-shrink  0
        border-right @border
        >.img
          width 3.75rem
          height 3.75rem
          border @border
          border-radius 50%
          margin 1rem auto .6rem auto
          background-color #eeeeee
          background-image url(img/dam.png)
          background-size cover
          background-position center
        >.label
          text-align center
      >.text
        flex auto
    >.imgbtns
      float right
      margin-right 2rem
      height 2.5rem
      margin-top .6rem
      white-space nowrap
      >.imgbtn
        width 15%
      >.kwds
        display inline-block
        padding-left 2rem
        color #666666
        >.kwd
          color #ff1e00
          margin-right .3rem
  >.timedate
    width 9rem
    flex-shrink  0
    padding-top 4rem
    >.time
    >.date
      text-align center

.itemText
  padding 1rem 2rem
  >.head
    color black
    >.left
      float left
      width 36%
      display flex
      >.title
        flex 1
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
        cursor pointer
      >.similar
        color #ff0000
        padding-left 1.2rem
    >.right
      float right
      >.read
      >.tend
      >.rank
        margin-left 1.6rem
        display inline-block
      >.read
        height 1rem
        vertical-align top
        margin-right 7rem
        >.readimg
          position relative
          top -2.8rem
          width 5.44rem
      .tend-label-root
        position relative
        top -.4rem
      .el-rate
        display inline-block
        position relative
        top -.1rem
  >.body
    clear both
    color #666666
    padding-top .8rem
    height 3.6rem
    line-height 1.8rem
    overflow  hidden;
    cursor pointer
.collectActive
  color #8c97cb
.sharethat
  position absolute
  display none
  z-index 8
  top 1.8rem
  left 25px
  width 95px
  height 110px
  background #fff
  box-sizing border-box
  box-shadow 0px 0px 8px #ddd
  &:last-of-type
    top 1.8rem
    left 25px
  >div
    position relative
    font-size 14px
    color #666666
    text-indent 50px
    text-align left
    line-height 30px
    height 30px
    cursor pointer

    &:hover
      background-color #ddd
    &.wx
      background-image url('img/share-wx.png') 
      background-repeat no-repeat
      background-size 20px 16px
      background-position 20px 7px
      margin 21px 0 0px 0
    &.wb
      background-image url('img/share-wb.png')
      background-repeat no-repeat
      background-size 20px 16px
      background-position 20px 7px
    &.close
      background-image url('img/close.png')
      background-repeat no-repeat
      background-size 15px 15px
      background-position 20px 7px
    >.ewmbox
      display none
      position absolute
      width 106px
      height 93px
      background url('img/ewmbox.png') no-repeat
      padding 7px 7px 7px 17px
      left 100px
      top -9px
      opacity 0
      transition all 0.25s 
      canvas
        opacity 0

</style>